<template>
  <div id="enterpriseCertification">
    <div class="title">请输入企业信息</div>
    <div class="message">
      <el-form
        :label-position="labelPosition"
        label-width="auto"
        :model="formLabelAlign"
        style="max-width: 600px"
        class="form"
      >
        <el-form-item label="企业名称">
          <el-input v-model="formLabelAlign.name" placeholder="请输入企业名称" />
        </el-form-item>
        <el-form-item label="企业地址">
          <el-input v-model="formLabelAlign.address" placeholder="请输入企业地址" />
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="formLabelAlign.phone" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="企业类型">
          <el-select v-model="formLabelAlign.type" placeholder="请选择企业类型" size="large" style="width: 531px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="营销执照">
          <el-upload
            :on-success="fileSubmit"
            :http-request="httpRequest"
            class="upload-demo"
            drag
            multiple
          >
            <el-icon class="el-icon--upload">
              <upload-filled />
            </el-icon>
            <div class="el-upload__text">Drop file here or <em>click to upload</em></div>
            <template #tip>
              <div class="el-upload__tip">jpg/png files with a size less than 500kb</div>
            </template>
          </el-upload>
        </el-form-item>

        <el-form-item style="margin-left: 30%">
          <el-space :size="150">
            <el-button type="primary" @click="submitForm(ruleFormRef)">认证</el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
          </el-space>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watchEffect } from 'vue'
import { ElMessage, ElNotification, type FormProps, type UploadFile, type UploadFiles } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'
import axios from 'axios'
import { transferEmission } from '@/utils/useWeb3'

const labelPosition = ref<FormProps['labelPosition']>('right')
const wallet = reactive(JSON.parse(localStorage.getItem('wallet') as string) || {})
const account = ref(wallet.address ? wallet.address : '')
const formLabelAlign = ref({
  name: '',
  address: '',
  type: '',
  phone: '',
  email: '000',
  file: ''
})
const type = ref('')
const httpRequest = (file: any) => {
  formLabelAlign.value.file = file.file
}
const options = [
  { label: '发电企业', value: '发电企业' },
  { label: '电网企业', value: '电网企业' },
  { label: '电解铝企业', value: '电解铝企业' },
  { label: '民航企业', value: '民航企业' }
]

/**
 * 企业认证
 * @param ruleFormRef
 */
const submitForm = async (ruleFormRef: any) => {
  const fromData = new FormData()
  fromData.append('name', formLabelAlign.value.name)
  fromData.append('type', formLabelAlign.value.type)
  fromData.append('address', formLabelAlign.value.address)
  fromData.append('phone', formLabelAlign.value.phone)
  fromData.append('file', formLabelAlign.value.file)
  fromData.append('email', formLabelAlign.value.email)
  console.log(fromData)
  //1.添加记录--->company表
  await axios.post('/bbb/company/add', fromData).then(async (res) => {

    if (res.data.code != 0) {
      ElMessage({
        message: '企业认证失败-数据库异常',
        type: 'error'
      })
    } else {
      //2.分发碳配额
      const res2 = await transferEmission(account.value,formLabelAlign.value.type)
      ElMessage({
        message: '企业认证成功',
        type: 'success'
      })
    }
  })
}
/**
 * 重置
 * @param ruleFormRef
 */
const resetForm = (ruleFormRef: any) => {
  console.log('重置：', ruleFormRef)
}
watchEffect(()=>{
  console.log(account.value==="")
  if(account.value==="")
  {
    ElNotification({
      title: '通知',
      message: h('i', { style: 'color: teal' }, '请先创建区块链钱包，在进行企业认证'),
    })
  }
})
/**
 * 文件上传
 * @param uploadFile
 * @param uploadFiles
 */
const fileSubmit = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {}
</script>

<style scoped>
.form {
  margin: 30px auto;
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
  height: 100%;
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
}

.container {
  width: 100%;
}

.title {
  height: 40px;
  line-height: 40px;
  background-color: rgb(247, 226, 196);
  padding-left: 20px;
  margin-left: -1%;
}

.message > div {
  text-align: center;
}
</style>
